<template>
	<view class="item" @click.stop="toDetail">
		<u-gap height="28"></u-gap>
		<view class="u-flex">
			<view class="item-img-wrap" v-if="type == 'order'">
				<image class="" v-if="detail.productImg" :src="baseImgUrl+detail.productImg" mode="aspectFill">
				</image>
			</view>
			<view class="item-img-wrap" v-else>
				<image class="" v-if="detail.mainImage" :src="baseImgUrl+detail.mainImage.imagePath" mode="aspectFill">
				</image>
			</view>
			<view class="u-p-l-20 u-flex-1" style="width: 0">
				<view class="u-font-28 ellipsis">{{detail.name || detail.productName || ''}}</view>
				<view class="u-font-24 u-p-t-10 u-tips-color" v-if="type == 'good'">
					已售{{detail.salesVolume}}件
				</view>
				<view class="u-font-24 u-p-t-10 u-tips-color" v-if="type == 'cart'">
					{{detail.specifications}}
				</view>
				<view class="u-font-24 u-p-t-10 u-tips-color" v-if="type == 'order'">
					{{detail.productSpecifications}}
				</view>
				<view class="u-flex u-p-t-10">
					<view class="u-flex-1">
						<view class="color-green">
							<text class="u-font-32">￥{{detail.price || detail.productPrice || ''}}</text>
						</view>
					</view>
					<slot name="right"></slot>
				</view>

			</view>
		</view>
		<u-gap height="28"></u-gap>
		<u-line color="#F6F6F6" v-if="border" />
	</view>
</template>
<script setup>
	import {
		ref,
		computed,
		getCurrentInstance
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl
	} = proxy
	const {
		nav,
		navLogin
	} = proxy.$util;
	const props = defineProps({
		detail: {
			type: Object,
			default: {},
		},
		border: {
			type: Boolean,
			default: true,
		},
		type: {
			type: String,
			default: 'good',
		},

	})
	const toDetail = () => {
		if (props.type == 'order') {
			return;
		}
		let data = {};
		if (props.type == 'cart') {
			data.sid = props.detail.productSid
		} else {
			data.sid = props.detail.sid
		}
		nav('/pagesSub/goodDetail/goodDetail', data)
	}
</script>

<style lang="scss" scoped>
	.item {
		position: relative;
		// background: #FFFFFF;
		width: 100%;
		max-width: 100%;
		overflow: hidden;

		.ellipsis {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.item-img-wrap {
		width: 136upx;
		height: 136upx;
		min-width: 136upx;
		border-radius: 10upx;
		overflow: hidden;

		image {
			width: 136upx;
			height: 136upx;
		}
	}
</style>